<template>
  <div class="tool-complex">
    <eharts-option :config="config" :option="option"></eharts-option>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-echart-line",
  mixins: [mixins],
  data() {
    return {
      tableData: {
        xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        yData: [
          { type: "bar", name: "First" },
          { type: "bar", name: "Secound" },
        ],
        valueData: [
          [320, 200, 150, 80, 70, 110, 130],
          [150, 260, 100, 180, 150, 56, 245],
        ],
      },
      attr: null,
    };
  },
  computed: {
    option() {
      const _this = this;
      const gridData = this.tableData;
      let series = [];
      try {
        gridData.yData.forEach((ydata, index) => {
          // {
          //   name: "Email",
          //   type: "line",
          //   smooth: this.attr.smooth,
          //   stack: "Total",
          //   areaStyle: {},
          //   emphasis: {
          //     focus: "series",
          //   },
          //   itemStyle: {
          //     color: _this.attr.linearGradientShow
          //       ? _this.$methods.gradientReturnString(
          //           "echart",
          //           _this.attr.linearGradient
          //         )
          //       : this.attr.colors[0],
          //   },
          //   data: [120, 132, 101, 134, 90, 230, 210],
          // },
          series.push({
            data: gridData.valueData[index],
            type: 'line',
            name: ydata.name,
            smooth: this.attr.smooth,
            areaStyle: {},
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            itemStyle: {
              color: _this.attr.linearGradientShow
                ? _this.$methods.gradientReturnString(
                    "echart",
                    _this.attr.linearGradient
                  )
                : this.attr.colors[index],
            },
            emphasis: {
              focus: "series",
            },
            label: {
              show: _this.attr.labelShow, // 显示数值
              position: "outside", // 显示位置
              color: _this.attr.labelColor,
              fontSize: _this.attr.labelSize,
            },
          });
        });
      } catch (error) {
        console.log(error);
      }
      return {
        title: {
          show: this.attr.titleShow,
          text: this.attr.title,
          textStyle: {
            color: this.attr.fontColor,
            fontWeight: this.attr.fontWeight,
            fontSize: this.attr.fontSize,
          },
          padding: [16, 16],
          itemGap: 6, //主副标题之间的间距
          left: "left", // 100、'left'、'right'、'center'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        // tooltip: {
        //   show: true,
        //   trigger: "axis", // item
        //   appendToBody: true,
        //   formatter: "{a}<br />{b}: {c}kg",
        //   backgroundColor: "rgba(50,50,50,0.7)",
        //   borderColor: "rgba(50,50,50,0.7)",
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: 14,
        //   },
        // },
        // 图例
        legend: {
          padding: 16,
          show: this.attr.legendShow,
          textStyle: {
            color: this.attr.legendColor,
            fontWeight: 800,
            fontSize: this.attr.legendSize,
          },
          formatter: function (name) {
            return name;
          },
          padding: [16, 16],
          left: "right",
          top: "auto",
          orient: this.attr.orient, // 'horizontal'、'vertical'
          icon: "roundRect", // 'circle'、'rect'、'roundRect'
          itemHeight: 16,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        // 距离四周的距离(单位：px)
        grid: {
          left: 16,
          right: 16,
          top: 64,
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: series,
        // [
        //   {
        //     name: "Email",
        //     type: "line",
        //     smooth: this.attr.smooth,
        //     stack: "Total",
        //     areaStyle: {},
        //     emphasis: {
        //       focus: "series",
        //     },
        //     itemStyle: {
        //       color: _this.attr.linearGradientShow
        //         ? _this.$methods.gradientReturnString(
        //             "echart",
        //             _this.attr.linearGradient
        //           )
        //         : this.attr.colors[0],
        //     },
        //     data: [120, 132, 101, 134, 90, 230, 210],
        //   },
        // {
        //   name: "Union Ads",
        //   type: "line",
        //   stack: "Total",
        //   areaStyle: {},
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [220, 182, 191, 234, 290, 330, 310],
        // },
        // {
        //   name: "Video Ads",
        //   type: "line",
        //   stack: "Total",
        //   areaStyle: {},
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [150, 232, 201, 154, 190, 330, 410],
        // },
        // {
        //   name: "Direct",
        //   type: "line",
        //   stack: "Total",
        //   areaStyle: {},
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [320, 332, 301, 334, 390, 330, 320],
        // },
        // {
        //   name: "Search Engine",
        //   type: "line",
        //   stack: "Total",
        //   label: {
        //     show: true,
        //     position: "top",
        //   },
        //   areaStyle: {},
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [820, 932, 901, 934, 1290, 1330, 1320],
        // },
        // ],
      };
    },
  },
  pageData: {
    version: "0.0.2",
    name: "tool-echart-line",
    title: "折线图",
    count: 0,
    width: 540,
    height: 360,
    config: {
      label: "折线图",
      type: "table",
      url: "",
      data: {
        key: "tableData",
        value: {
          xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          yData: [
            { type: "bar", name: "First" },
            { type: "bar", name: "Secound" },
          ],
          valueData: [
            [320, 200, 150, 80, 70, 110, 130],
            [150, 260, 100, 180, 150, 56, 245],
          ],
        },
      },
      axios: {
        type: "get",
      },
      params: {},
      attr: [
        {
          key: "colors",
          title: "颜色主题",
          formType: "color-group",
          group: "basics",
          type: "Array",
          data: [
            "#409eff",
            "#0967F2",
            "#ECF6FD",
            "#609BEF",
            "#67C23A",
            "#E6A23C",
            "#F56C6C",
            "#909399",
          ],
        },
        {
          key: "linearGradientShow",
          title: "启用渐变色",
          formType: "radio-select",
          group: "linear-gradient",
          type: "Boolean",
          data: false,
        },
        {
          key: "linearGradient",
          title: "",
          hidden: false,
          formType: "color-linear-gradient",
          group: "linear-gradient",
          type: "Object",
          data: {
            type: "linear-gradient",
            angle: 45,
            colors: ["#409eff", "#0967F2"],
          },
        },
        {
          key: "labelShow",
          title: "显示数值",
          formType: "radio-select",
          group: "basics",
          type: "Boolean",
          data: false,
        },
        {
          key: "labelColor",
          title: "数值颜色",
          formType: "color-picker",
          group: "basics",
          type: "Boolean",
          data: "#000",
        },
        {
          key: "labelSize",
          title: "数值大小",
          formType: "text-number",
          group: "basics",
          type: "Number",
          data: 16,
        },
        {
          key: "titleShow",
          title: "显示标题",
          formType: "radio-select",
          group: "title",
          type: "Boolean",
          data: false,
        },
        {
          key: "title",
          title: "自定义标题",
          formType: "text-string",
          group: "title",
          type: "String",
          data: "柱状图标题",
        },
        {
          key: "fontColor",
          title: "标题颜色",
          formType: "color-picker",
          group: "title",
          type: "String",
          data: "#000",
        },
        {
          key: "fontWeight",
          title: "标题粗细",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 800,
        },
        {
          key: "fontSize",
          title: "标题大小",
          formType: "text-number",
          group: "title",
          type: "String",
          data: 16,
        },
        {
          key: "legendShow",
          title: "显示图例",
          formType: "radio-select",
          group: "legend",
          type: "Boolean",
          data: true,
        },
        {
          key: "orient",
          title: "图例布局",
          formType: "select-option", // text-string
          group: "legend",
          type: "String",
          data: "horizontal",
          default: [
            {
              label: "水平",
              value: "horizontal",
            },
            {
              label: "垂直",
              value: "vertical",
            },
          ],
        },
        {
          key: "legendSize",
          title: "文字大小",
          formType: "text-number",
          group: "legend",
          type: "String",
          data: 12,
        },
        {
          key: "legendColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "legend",
          type: "String",
          data: "#000",
        },
        {
          key: "axisColor",
          title: "文字颜色",
          formType: "color-picker",
          group: "axis",
          type: "String",
          data: "#000",
        },
        {
          key: "axisSize",
          title: "文字大小",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 16,
        },
        {
          key: "smooth",
          title: "平滑折线",
          formType: "radio-select",
          group: "axis",
          type: "Boolean",
          data: false,
        },
        {
          key: "rotateX",
          title: "X 轴角度",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 0,
        },
        {
          key: "rotateY",
          title: "Y 轴角度",
          formType: "text-number",
          group: "axis",
          type: "String",
          data: 0,
        },
      ],
    },
  },
};
</script>

<style scoped lang="scss">
.tool-complex {
  width: 100%;
  height: 100%;
}
</style>
